<html>
<meta charset="utf-8">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>请上传您的文件</title>
  <style >
  form{
    position: relative;
  }
    .defaultInput{
      visibility: hidden;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
    .beautify{
      display: inline-block;
      width: 500px;
      line-height: 500px;
      text-align: center;
      border-radius: 50%;
      border:solid 1px #ddd;
      background-repeat: no-repeat;
      background-size:cover;
      background-position: center;
    }
  </style>
</head>

<body>
  <form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" class="defaultInput" name="upload" multiple="multiple" id="file" onchange="processFiles(this.files)">
    <label for="file" class="beautify" id="fileOutput">请选择图片上传</label>
    <input type="submit" value="上传" />
  </form>
  <div>

  </div>
  <script src="/js/jquery.min.js" charset="utf-8"></script>
  <script>
    function processFiles(files) {
      var file = files[0];
      var output = $('#fileOutput');

      //创建FileReader
      var reader = new FileReader();
      //告诉它在准备好数据之后做什么
      reader.onload = function(e) {
        //使用图像URL来绘制显示图片
        var filetype = file.type;
        if (filetype.indexOf('image') != -1) {
          var img = document.createElement('img');
          $(output).css('background',"url("+e.target.result+")");
          $(output).css('background-repeat',"no-repeat");
          $(output).css('background-size',"100% 100%");
          $(output).css('background-position',"center");


          // img.src=e.target.result;
          // img.title = file.name;
          // img.width='500';
          // $(output).html($(img));
        } else {
          var img = document.createElement('img');
          img.src = './public/images/regular.png';
          img.title = file.name;
          $(output).html($(img));
        }
      };
      //读取图片
      reader.readAsDataURL(file);
    }
  </script>
</body>

</html>
